<template>
        <div class="settlesearch">
                <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline">
                        <el-form-item label="项目：">
                                <el-input v-model.trim="params.projectName" placeholder="请输入项目名称"></el-input>
                        </el-form-item>
                        <el-form-item label="楼盘：">
                                <el-input v-model.trim="params.devName" placeholder="请输入楼盘名称"></el-input>
                        </el-form-item>
                        <el-form-item label="归属：">
                                <el-select v-model="params.blocType">
                                        <el-option v-for="item in blocTypes" :label="item.label" :key="item.value" :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="类别：">
                                <el-select v-model="params.pushType">
                                        <el-option v-for="item in pushTypes" :label="item.label" :key="item.value" :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                        <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                        <el-button type="primary" @click="resetForm">重置</el-button>
                </el-form>
                <el-table :data="tableData" border stripe  @sort-change='tableSortChange'>
                        <el-table-column type="index" label="序号" width="80" align="center" :index="indexFun"></el-table-column>
                        <el-table-column  label="项目" prop="projectName" align="center" :formatter="commonline"></el-table-column>
                        <el-table-column  label="楼盘" prop="devName" align="center" :formatter="commonline"></el-table-column>
                        <el-table-column  label="归属" prop="blocTypeText" align="center" :formatter="commonline"></el-table-column>
                        <el-table-column  label="类别" prop="pushTypeText" align="center" :formatter="commonline"></el-table-column>
                        <el-table-column  label="应付金额" prop="payableAmount" align="center" :formatter="initMoney" sortable="custom" :sort-orders="['ascending', 'descending']"></el-table-column>
                        <el-table-column  label="已付金额"  align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.$index==0">{{toFixedFn(scope.row.paymentAmount)}}</span>
                                <el-button type="text" @click="jumpList(scope.row,scope.$index)" v-else>{{toFixedFn(scope.row.paymentAmount)}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column  label="待付金额" prop="waitPayAmount" align="center" :formatter="initMoney"></el-table-column>
                </el-table>
                <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="params.pageNum"
                            :page-sizes="[10,30,50,100]"
                            :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total" style="margin-top:30px;">
                 </el-pagination>
        </div>
</template>

<script>
import utils from "../../../../common/utils"
import api from '@/api/apiPath'
export default {
        name: 'searchsettle',
        title: '结算查询',
        data(){
                return {
                        blocTypes:[
                                {label:"全部",value:""},{label:"合生",value:4},{label:"珠江",value:5},{label:"外拓",value:6}
                        ],
                        pushTypes:[
                                {label:"全部",value:""},{label:"经纪公司佣金",value:7},{label:"经纪人佣金",value:8},{label:"网络推客佣金",value:6},{label:"电商费退款",value:5},
                                {label:"开发商返还款",value:11},{label:"跟投分红",value:10},{label:"经纪人奖励（现金）",value:12}
                        ],
                        tableData:[],
                        totallist:{},
                        params:{
                                projectName:"",
                                devName:"",
                                blocType:"",
                                pushType:"",
                                sort:"DESC",//DESC-倒序 ASC-正序
                                pageSize:10,
                                pageNum:1
                        },
                        total:0
                }
        },
        methods:{
            commonline(row, column, cellValue, index){
                if(index==0){
                    return "——"
                }
                return cellValue
            },
            indexFun(index){
                if(index==0){
                    return "合计"
                }
                return index;
            },
            loadData(){
                this.axios.post(api.SETTLESEARCH,this.params).then((res)=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                        this.tableData.unshift(res.data.data.listTotal);
                        // this.totallist=res.data.data.listTotal;
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            },
            toFixedFn(cellValue){//保留两位小数并且千分位展示
                    if(cellValue !=undefined && cellValue.toString()!="" && cellValue !=null){
                            let tempValue=parseFloat(cellValue)
                            return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
                    }
            },
            initMoney(row, column, cellValue, index){
                    return this.toFixedFn(cellValue);
            },
            handleSizeChange(val){
                this.params.pageSize=val;
                this.loadData();
            },
            handleCurrentChange(val){
                this.params.pageNum=val;
                this.loadData();
            },
            query(){
                this.loadData();
            },
            resetForm(){
                this.params.projectName="";
                this.params.devName="";
                this.params.blocType="";
                this.params.pushType="";
                this.params.sort="DESC";
                this.loadData();
            },
            tableSortChange(column){
                if(column.order=="descending"){
                    this.params.sort="DESC";
                    this.loadData();
                }else{
                    this.params.sort="ASC";
                    this.loadData();
                }
            },
            jumpList(data,index){
                if(index!=0){
                    this.$router.push({
                        path:"/tobepaidlist",
                        query:{
                            devId:data.devId,
                            pushType:data.pushType,
                            payStatus:3
                        }
                    })
                }
            }
        },
        mounted(){
            this.loadData();
        }
}
</script>

<style lang="stylus">

</style>
